import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useTheme } from '../../hooks/useTheme';

/**
 * 进度条组件
 */
const ProgressBar = ({ progress = 0, height = 8, showText = true, style, color }) => {
  const { theme } = useTheme();
  const percentage = Math.min(Math.max(progress, 0), 100);

  // 根据完成率获取颜色（如果没有传入 color）
  const getProgressColor = () => {
    if (color) return color;
    if (percentage >= 80) {
      return theme.colors.success; // 高完成率：绿色
    } else if (percentage >= 50) {
      return theme.colors.warning; // 中完成率：橙色
    } else {
      return theme.colors.error; // 低完成率：红色
    }
  };

  return (
    <View style={[styles.container, { height }, style]}>
      <View style={[styles.track, { backgroundColor: theme.colors.surface }]}>
        <View 
          style={[
            styles.fill, 
            { 
              width: `${percentage}%`,
              backgroundColor: getProgressColor(),
            }
          ]} 
        />
      </View>
      {showText && (
        <Text style={[styles.text, { color: theme.colors.textSecondary }]}>{percentage}%</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  track: {
    flex: 1,
    height: '100%',
    borderRadius: 4,
    overflow: 'hidden',
  },
  fill: {
    height: '100%',
    borderRadius: 4,
    transition: 'width 0.3s ease',
  },
  text: {
    fontSize: 12,
    fontWeight: '500',
    minWidth: 40,
    textAlign: 'right',
  },
});

export default ProgressBar;

